<template>
	<view>
		<!-- 全屏加载 -->
		<view class="cover_bar_srcoll cover_bulr_bg" catchtouchmove="true">
			<view class="custom-loader"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cover-bulr-bg",
		data() {
			return {

			};
		},
		props: {
			// 全屏加载
			coverBulr: {
				type: Boolean,
				value: true
			}
		},
	}
</script>

<style>
	.cover_bulr_bg {
		height: 100%;
		width: 100%;
		z-index: 1000009;
		position: fixed;
		background-color: rgb(255, 255, 255, 0.75);
		top: 0;
		left: 0;
	}

	/* css加载动画 */
	.custom-loader {
		width: 50px;
		height: 50px;
		display: grid;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.custom-loader::before,
	.custom-loader::after {
		content: "";
		grid-area: 1/1;
		--c: radial-gradient(farthest-side, #766DF4 92%, #0000);
		background:
			var(--c) 50% 0,
			var(--c) 50% 100%,
			var(--c) 100% 50%,
			var(--c) 0 50%;
		background-size: 12px 12px;
		background-repeat: no-repeat;
		animation: s2 1s infinite;
	}

	.custom-loader::before {
		margin: 4px;
		filter: hue-rotate(45deg);
		background-size: 8px 8px;
		animation-timing-function: linear
	}

	@keyframes s2 {
		100% {
			transform: rotate(.5turn)
		}
	}

	.cover_bar_srcoll {
		backdrop-filter: blur(20px);
	}
	
	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {
		.cover_bulr_bg{
			 background-color: rgb(0 0 0 / 75%);
		}
	}
</style>